<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="master.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    
    <ui:define name="title">
        Test klant
    </ui:define>
    
    <ui:define name="content">
        
        <h1>Testje klant</h1>

        <h:form>
            <p><h:outputLabel id="klantEmailLabel" for="klantEmail" value="Email: " />
            <h:inputText id="klantEmail" value="#{klantController.email}" required="true"></h:inputText></p>

            <p><h:outputLabel id="klantVoornaamLabel" for="klantVoornaam" value="Voornaam: " />
            <h:inputText id="klantVoornaam" value="#{klantController.voornaam}" required="true"></h:inputText></p>
            
            <p><h:outputLabel id="klantAchternaamLabel" for="klantAchternaam" value="Naam: " />
            <h:inputText id="klantAchternaam" value="#{klantController.achternaam}" required="true"></h:inputText></p>
            
            <p><h:outputLabel id="klantStraatLabel" for="klantStraat" value="Straat: " />
            <h:inputText id="klantStraat" value="#{klantController.straat}" required="true"></h:inputText></p>
            
            <p>
                <h:outputLabel id="selectGemeenteLabel" for="selectGemeente" value="Gemeente: " />
                <h:selectOneMenu id="selectGemeente" value="#{klantController.gemeente}">
                    <f:selectItems value="#{gemeenteController.gemeenten}" var="gemeente" itemLabel="#{gemeente}" itemValue="#{gemeente.id}"/>
                </h:selectOneMenu>
            </p>
            
            <p>
                <h:commandButton value="Submit" action="#{klantController.insertKlant}"></h:commandButton>
            </p>
        </h:form>
        
        <h:dataTable var="klant" value="#{klantController.klanten}">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Email:"/>
                </f:facet>
                <h:outputText value="#{klant.email}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Voornaam:"/>
                </f:facet>
                <h:outputText value="#{klant.voornaam}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Achternaam:"/>
                </f:facet>
                <h:outputText value="#{klant.achternaam}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Straat:"/>
                </f:facet>
                <h:outputText value="#{klant.straat}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Gemeente:"/>
                </f:facet>
                <h:outputText value="#{klant.gemeente}"/>
            </h:column>
            
        </h:dataTable>
        
    </ui:define>  
</ui:composition>